import './App.css';
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';
import { useState } from 'react';


function App() {

  const  data = [
    {
      id: 1,
      name: '吃饭',
      done: false
    },
    {
      id: 2,
      name: '睡觉',
      done: false
    },
    {
      id: 3,
      name: '写代码',
      done: false
    }
  ]

  const [list, setList] = useState(data)

  // 增加待办事项
  const addItem = (item) => {
    setList([...list, item])
  }

  // 删除待办事项
  const deleteItem = (id) => {
    setList(list.filter(item => item.id !== id))
  }

  // 修改待办事项状态
  const changeDone = (id) => {
    console.log(id)
    console.log(list)
    setList(list.map(item => {
      if (item.id === id) {
        item.done = !item.done
      }
      return item
    }))
  }

  // 全选待办事项
  const selectAll = (done) => {
    console.log(list)
    setList(list.map(item => {
      item.done = done
      return item
    }))
  }

  return (
    <div className="App">
      <Header addItem={addItem} />
      <List list={list} deleteItem={deleteItem} changeDone={changeDone} />
      <Footer selectAll={selectAll} list={list} />
    </div>
  );
}

export default App;
